<template>
	<view class="content">
		<view>
			<form>
				<view class="cu-bar bg-white margin-top">
					<view class="action">
						待上传 {{imgList.length}}/1
					</view>
				</view>
		
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage"
							:data-url="imgList[index]">
							<image :src="imgList[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseFile" v-if="imgList.length<1">
							<text class='cuIcon-add'></text>
						</view>
						<text style="margin-top: 20px;">{{this.fileNameTit}}</text>
					</view>
				</view>
				
			</form>
			<l-file ref="lFile" @up-success="onSuccess"></l-file>
		</view>

		<button class="tj-btn" @click="uploadPayFile()">提交</button>
	</view>

</template>

<script>
		
	export default {

		data() {

			return {
				order_no: '',
				orderid: '',
				orderId:'',
				userId:'',
				orderId:'',
				user_id:'',
				imgList: [],
				tpf: [],
				fileNameTit:'',
				fileSrc:'',
				//src:'',
				baseUrl: 'https://gjc.hy-dzsc.cn/',
			}
		},
		onLoad(e) {

			this.orderid = e.orderid
			this.order_no = e.order_no
			this.user_id  = e.user_id
			this.userId =e.user_id
			this.orderId = e.orderid
		},
		methods: {


			ChooseFile() {
					uni.chooseImage({
						count:1,
						// sizeType:'compressed',
						type:'all',
						// extension:['.doc'],
						// file:'name',
						success: (res) => {
							this.tpf  = res.tempFiles[0]
							this.fileNameTit=this.tpf['name']
							const imgsFile=res.tempFilePaths
							if (this.imgList.length != 0) {
								this.imgList = this.imgList.concat(res.tempFilePaths)
							} else {
								this.imgList = res.tempFilePaths
							}
							//上传
							const uper=uni.uploadFile({
								url: this.$baseurl()+ `/gjcApi/upload_zhifu`,
								filePath:imgsFile[0],
								// formData:{    },用于做令牌认证
								success:(res1)=>{
									var gg = eval('(' + res1['data'] + ')')
							
									if(res1.statusCode == 200){
										console.log(gg["src"]);
									this.fileSrc = gg['src']
									
									}else{
										console.log('未知错误')
									}
									
								}
							})
							//上传进度更新的方法
							// uper.onProgressUpdate((e)=>{
							// 	console.log(e)
							// 	_self.percent=e.progress
							// })
						}
					})
					
			},
			/* onSuccess(res) {
							console.log('上传成功回调=====33====',JSON.stringify(res));
							uni.showToast({
								title: JSON.stringify(res),
								icon: 'none'
							})
						}, */
		
			ViewImage(e) {
				console.log(e)
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			//删除
			DelImg(e) {
				uni.showModal({
					title: '删除',
					content: '确定要删除这张图片？',
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			
			uploadPayFile(){
	
						if(this.imgList.length==0){
							 uni.showToast({
								  title:'未选择图片，提交失败',
								  position:'top',
								  icon:'error',
								  duration:2000
							 })
						}else{
							//console.log(this.orderId)
							var that = this
							this.$getHttp(`/gjcApi/save_zhifu?orderid=${this.orderid}&order_no=${this.order_no}&src=${this.fileSrc}&user_id=${this.user_id}`, {}, res => {
								console.log(res)
								if(res.code == 403){
									uni.showToast({
										title:res.msg,
										duration:1500,
										icon:'error'
									})
								}
								if(res.code == 200){
												uni.showToast({
												title:'提交成功',
												duration:1500,
												icon:'success'
											})
											//跳转详情
											uni.navigateTo({
												url: `/pages/my/order/all-order?orderId=${that.orderId}&userId=${that.userId}&current=2`
											})
											}
							})
							uni.uploadFile({
								url:this.$baseurl()+`/gjcApi/save_zhifu?orderid=${this.orderid}&order_no=${this.order_no}&src=${this.fileSrc}&user_id=${this.user_id}`,
						
								success(res){
									
									// console.log(res)
									 if(res.statusCode == 200){
										 	uni.showToast({
										title:'提交成功',
										duration:1500,
										icon:'success'
									})
									//跳转详情
									uni.navigateTo({
										
										url: `/pages/my/order/all-order?orderId=${that.orderId}&userId=${that.userId}&current=2`
									})
									 }
								
									
								}
							})
						}
			}
	






		}
	}
</script>

<style>
	@import "/colorui/main.css";
	@import "/colorui/icon.css";

	.choose-tit {
		color: #ccc;
		margin: 15px 15px;
		float: left;
	}

	.imgCount {
		float: right;
		margin: 15px 15px;
	}

	.tj-btn {
		background: #05c063;
		color: #fff;
		width: 100px;
		margin-top: 20px;
	}

</style>

